<template>
  <div class="bztypes-chart">
    <div class="center-board-title">编制总量</div>
    <div id="leftChart" />
  </div>
</template>

<script>
export default {
  props: {
    depCode: {
      type: String
    },
    options: Array
  },
  data() {
    return {
      myEchart: null
    }
  },
  watch: {
    options(newValue, oldValue) {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      const _this = this
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} <br/> 占比：{d}% '
        },
        title: {
          text:
            this.options[0].XZ_BZ +
            this.options[0].GA_BZ +
            this.options[0].SF_BZ +
            this.options[0].FY_BZ +
            this.options[0].JCY_BZ +
            this.options[0].SY_BZ +
            this.options[1].XZ_DFP +
            this.options[1].GA_DFP +
            this.options[1].SF_DFP +
            this.options[1].FY_DFP +
            this.options[1].JCY_DFP +
            this.options[1].SY_DFP,
          subtext: '总编制数',
          x: 'center',
          y: '43%',
          textStyle: {
            fontSize: 20,
            fontWeight: 'normal',
            color: '#00FFFF'
          },
          subtextStyle: {
            fontSize: 18,
            fontWeight: 'normal',
            align: 'center',
            color: '#eee'
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '50%'],
            color: [
              '#3399ff',
              '#FFD18C',
              '#fb7293',
              '#33ddcc',
              '#ff9f7f',
              '#ffdb5c',
              '#e7bcf3',
              '#8378ea'
            ],
            itemStyle: {
              normal: {
                borderWidth: 1,
                borderColor: '#031845'
              }
            },
            data: [
              {
                value: this.options[0].XZ_BZ + this.options[1].XZ_DFP,
                name: '行政编制'
              },
              {
                value: this.options[0].GA_BZ + this.options[1].GA_DFP,
                name: '公安编制'
              },
              {
                value: this.options[0].SF_BZ + this.options[1].SF_DFP,
                name: '司法编制'
              },
              {
                value: this.options[0].SY_BZ + this.options[1].SY_DFP,
                name: '事业编制'
              },
              {
                value: this.options[0].FY_BZ + this.options[1].FY_DFP,
                name: '法院编制'
              },
              {
                value: this.options[0].JCY_BZ + this.options[1].JCY_DFP,
                name: '检察院编制'
              }
            ],
            labelLine: {
              normal: {
                show: true,
                lineStyle: {
                  color: '#eee',
                  width: 2
                }
              }
            },
            label: {
              normal: {
                formatter: '{b|{b}}\n{hr|}\n{c|{c}}',
                rich: {
                  b: {
                    fontSize: 14,
                    color: '#eee',
                    align: 'left',
                    padding: 5
                  },
                  hr: {
                    borderColor: '#ddd',
                    width: '100%',
                    borderWidth: 2,
                    height: 0
                  },
                  c: {
                    fontSize: 16,
                    align: 'center',
                    padding: 5,
                    color: '#fff'
                  }
                }
              }
            }
          }
        ]
      }
      this.myEchart = this.$echarts.init(document.getElementById('leftChart'))
      this.myEchart.setOption(option)
      window.addEventListener('resize', () => this.myEchart.resize(), false)
    }
  }
}
</script>

<style lang="scss">
.bztypes-chart {
  width: calc(33% - 30px);
  height: 100%;
  margin-left: 15px;
  margin-right: 15px;
  background-color: rgba(1, 35, 102, 0.9);
  border-radius: 20px;
  display: flex;
  flex-grow: 0;
  flex-direction: column;
  display: flex;
  flex-direction: column;

  .center-board-title {
    border-bottom: #336699 1px solid;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
  }
}

#leftChart {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
</style>
